<script setup>
import {ref, computed} from "vue";
import router from "../../router";
import { userInfoStore } from "../../store";

const emit = defineEmits(['update-status']);

const status = ref(false);
const toggleStatus = () => {
  status.value = !status.value;
  emit('update-status', status.value); // 发送新状态给父组件
};
const errorHandler = () => true


const logout = () => {
  router.push({name: 'login'});
}

const store = userInfoStore();
const headUrl = computed(() => store.user?.headsUrl || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png')
const nickname = computed(() => store.user?.nickname || '未登录用户')
const signature = ref('这个人很懒，什么都没有写。')
const gender = ref('保密')
</script>

<template>
  <div style="height: 100%;">
    <el-row :gutter="20" style="border: #99d5ff">
      <el-col :span="4">
        <div class="grid-content ep-bg-purple">
            <span style="color: white;font-size: 2rem" @click="toggleStatus">
              MIAO
            </span>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content ep-bg-purple"/>
      </el-col>
      <el-col :span="4">
        <div class="grid-content ep-bg-purple" style="flex-direction: column;">
          <div class="avatar-wrap">
            <el-popover
              placement="bottom-end"
              trigger="hover"
              :width="300"
              popper-class="user-popover"
            >
              <template #reference>
                <div class="avatar-ring">
                  <el-avatar :size="52" src="https://empty" @error="errorHandler" class="user-avatar">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt=""/>
                  </el-avatar>
                </div>
              </template>

              <div class="pop-card">
                <div class="pop-header">
                  <div class="pop-avatar square">
                    <el-avatar :size="44" src="https://empty" @error="errorHandler">
                      <img :src="headUrl" alt=""/>
                    </el-avatar>
                  </div>
                  <div class="pop-title">
                    <div class="name">{{ nickname }}</div>
                    <div class="meta">性别：{{ gender }}</div>
                  </div>
                </div>
                <div class="pop-body">
                  <div class="signature">{{ signature }}</div>
                </div>
                <div class="pop-actions">
                  <el-button size="small" type="primary">个人中心</el-button>
                  <el-button size="small" @click="logout">退出</el-button>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped>
.grid-content {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-ring {
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow; /* 优化动画性能 */
}

.avatar-ring.small {
  padding: 2px;
}

.avatar-ring:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

/* 优化整体布局动画 */
.grid-content {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 优化MIAO文字动画 */
.grid-content span {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, color;
  cursor: pointer;
}

.grid-content span:hover {
  transform: scale(1.05);
  color: #a4cab6;
}

.user-popover :deep(.el-popover__title) {
  margin: 0;
}

.pop-card {
  padding: 12px 12px 10px;
}

.pop-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pop-avatar.square :deep(.el-avatar__img),
.pop-avatar.square :deep(.el-avatar) {
  border-radius: 6px;
}

.pop-title .name {
  font-size: 16px;
  font-weight: 700;
}

.pop-title .meta {
  font-size: 12px;
  color: #666;
}

.signature {
  margin-top: 8px;
  font-size: 13px;
  color: #444;
}

.pop-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* 全局动画优化 */
* {
  box-sizing: border-box;
}

/* 优化侧边栏切换时的性能 */
.el-row {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 优化列布局动画 */
.el-col {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width, transform;
}

/* 防止动画期间的布局抖动 */
.ep-bg-purple {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
</style>